    // 请在此编写JS代码
    function Magnifier(){
        this.wrap_small = document.querySelector(".wrap-small-magnifier");
        this.wrap_small_img = document.querySelectorAll(".wrap-small-magnifier img");
        this.focus_ele = document.querySelector(".focus");
        this.big_ele = document.querySelector(".wrap-big-magnifier");
        this.big_img_ele = this.big_ele.querySelectorAll(".wrap-big-magnifier img");
        this.item_img_ele = document.querySelectorAll(".wrap-choice-magnifier i");
        this.index = 0 ;
 }
 Magnifier.prototype.bindEvent = function(){
        var magnifier_instance = this ;
        this.wrap_small.onmouseover = function(){
              magnifier_instance.togge("show");
        }
        this.wrap_small.onmouseout = function(){
              magnifier_instance.togge("hide");
        }
        this.wrap_small.onmousemove = function(evt){
              var e = evt || event ;
              magnifier_instance.move( e.offsetX , e.offsetY );
        }
        for(var i = 0 ; i < this.item_img_ele.length ; i++){
              this.item_img_ele[i].onclick = function(){
                    magnifier_instance.getIndex(this);
                    magnifier_instance.ChangeContent(); 
              }
        }
 }
 //tab切换
 Magnifier.prototype.getIndex = function(dom){
        for(var i = 0 ; i < this.item_img_ele.length ; i++ ){
             if(dom === this.item_img_ele[i]){
                   this.index = i ;
                   break;
             }
        }
  }
  Magnifier.prototype.ChangeContent = function(){
        for(var i = 0 ; i < this.item_img_ele.length ; i++ ){
              this.reomClass(this.item_img_ele[i] , "active");
              this.reomClass(this.big_img_ele[i] , "active");
              this.reomClass(this.wrap_small_img[i] , "active");
        }
        this.item_img_ele[this.index].className = " active";
        this.big_img_ele[this.index].className = " active";
        this.wrap_small_img[this.index].className = " active";
  }
  Magnifier.prototype.reomClass = function(dom , className){
        var reg = new RegExp("\\s?" + className);
        dom.className = dom.className.replace(reg , "");
  }
  //
 Magnifier.prototype.togge = function(type){
       switch(type){
              case "show" :
                    this.focus_ele.style.display = "block" ;
                    this.big_ele.style.display = "block";
                    break;
              case "hide" :
                    this.focus_ele.style.display = "none" ;
                    this.big_ele.style.display = "none";
                    break;
       }
 }
 Magnifier.prototype.move = function(x , y){
       var _left = x - 150;
       var _top = y - 150;
       _left = _left < 0 ? 0 : _left;
       _top = _top < 0 ? 0 : _top;
       _left = _left > 150 ? 150 : _left;
       _top = _top > 150 ? 150 : _top;
       this.focus_ele.style.left = _left + "px" ;
       this.focus_ele.style.top = _top + "px" ;
       var _left_prop = _left / 150 ;
       var _top_prop = _top / 150 ;
       for(var i = 0 ; i < this.item_img_ele.length ; i++ ){
              this.big_img_ele[this.index].style.left = - 250 * _left_prop + "px" ;
              this.big_img_ele[this.index].style.top = - 250 * _top_prop + "px" ;
       }
       
 }
 
 new Magnifier().bindEvent();